<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>安心运</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- vendor source -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="js/lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="js/lib/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="js/lib/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="js/lib/bootstrap-table/dist/bootstrap-table.min.css">
    <script src="js/lib/jquery-1.9.1/jquery.min.js"></script>
    <script src="js/lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script src="js/lib/moment/min/moment-with-locales.min.js"></script>
    <script src="js/lib/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
    <script src="js/lib/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="js/lib/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="js/lib/mustache/mustache.min.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=ryGGzhrZxutxxgj6q4TPjUGq"></script>
    <!-- thrift source -->
    <script type="text/javascript" src="js/thrift/thrift.js"></script>
    <script type="text/javascript" src="js/thrift/Content_types.js"></script>
    <script type="text/javascript" src="js/thrift/TContentService.js"></script>
    <script type="text/javascript" src="js/thrift/Type_types.js"></script>
    <script type="text/javascript" src="js/thrift/Geo_types.js"></script>
    <script type="text/javascript" src="js/thrift/File_types.js"></script>
    <script type="text/javascript" src="js/thrift/User_types.js"></script>
    <script type="text/javascript" src="js/thrift/TUserService.js"></script>
    <script type="text/javascript" src="js/thrift/User_types.js"></script>
    <script type="text/javascript" src="js/thrift/TUserService.js"></script>
    <script type="text/javascript" src="js/thrift/TruckTrack_types.js"></script>
    <script type="text/javascript" src="js/thrift/TTransportService.js"></script>
    <!-- common service js -->
    <script src="js/main.js"></script>
    <!-- seperate view css source -->
    <link rel="stylesheet" href="css/archive.css">
  </head>
  <body>
    <!-- header -->
    <div class="header clearfix">
      <div class="pull-left header-title">安心运车辆运输监控系统</div>
      <div class="pull-right">
        <div class="btn-top">
          <a href="javascript:;" class="btn btn-success">修改密码</a>
          <a href="javascript:;" class="btn btn-danger">退出</a>
        </div>
      </div>
    </div>

     <!-- navigator -->
    <ul class="nav nav-tabs">
      <li role="presentation"><a href="index.html">实时运输</a></li>
      <li role="presentation"><a href="archive.html">运输档案</a></li>
      <li role="presentation"><a href="sysMgt.html">系统管理</a></li>
    </ul>

    <!-- main content -->
    <div class="main archive-content">
      <div class="form-section">
        <form class="form-inline" id="query_archive_form">
          <div class="form-group form-group-sm">
            <label for="license">车牌号：</label>
            <input type="text" name="licNumber" class="form-control" id="license">
          </div>
          <div class="form-group form-group-sm">
            <label for="warning">运输日期：</label>
            <input type="text" name="beginDate" class="datetimepicker form-control">
            至
            <input type="text" name="endDate" class="datetimepicker form-control">
          </div>
          <div class="form-group form-group-sm">
            <label for="deliverAddressId">发货地：</label>
            <select name="deliverAddressId" id="deliverAddressId" class="form-control">
              <option value=""></option>
            </select>
          </div>
          <div class="form-group form-group-sm">
            <label for="receiveAddressId">收货地：</label>
            <select name="receiveAddressId" id="receiveAddressId" class="form-control">
              <option value=""></option>
            </select>
          </div>
          <div class="form-group form-group-sm">
            <label for="warning">是否告警：</label>
            <select name="warning" id="warning" class="form-control">
              <option value=""></option>
              <option value="1">是</option>
              <option value="0">否</option>
            </select>
          </div>
          <div class="text-center">
            <button type="button" id="query_archive_btn" class="btn btn-sm btn-success btn-center">查询</button>
            <button type="reset" class="btn btn-sm btn-success btn-center">重置</button>
          </div>
        </form>
      </div>
      <div class="table-section">
        <table id="archive-table" class="table table-striped">
          <thead>
            <tr>
              <th data-field="id">运输批次</th>
              <th data-field="truck.licNumber">运输车辆</th>
              <th data-field="driver.name">驾驶员</th>
              <th data-field="driver.mobile">手机</th>
              <th data-field="deliverAddress.name">发货地</th>
              <th data-field="receiveAddress.name">收货地</th>
              <th data-field="realCapacityTxt">载货量</th>
              <th data-field="deliverDateTxt">发货时间</th>
              <th data-field="receiveDateTxt">收货时间</th>
              <th data-field="spent">运输耗时</th>
              <th data-field="warningTxt">是否告警</th>
              <th data-field="operation"
                  data-formatter="archiveCtrl.methods.operationFormatter"
                  data-events="archiveCtrl.methods.showAttachmentsModal">操作</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>

    <!-- 附件图片modal -->
    <div class="modal fade" id="attachmentsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">
              附件
            </h4>
          </div>
          <div class="modal-body">
            <div class="highlight-outer">
              <div class="title">收货图片</div>
              <div id="receive_img_container" class="img-container">
                <img src="img/truck.jpg" class="attachment-img">
                <img src="img/truck.jpg" class="attachment-img">
                <img src="img/truck.jpg" class="attachment-img">
                <div class="justify-ocupy"></div>
                <div class="justify-ocupy"></div>
                <div class="justify-ocupy"></div>
              </div>
              <div class="title">发货图片</div>
              <div id="deliver_img_container" class="img-container">
                <img src="img/truck.jpg" class="attachment-img">
                <img src="img/truck.jpg" class="attachment-img">
                <img src="img/truck.jpg" class="attachment-img">
                <img src="img/truck.jpg" class="attachment-img">
                <div class="justify-ocupy"></div>
                <div class="justify-ocupy"></div>
                <div class="justify-ocupy"></div>
              </div>
            </div>


          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 告警记录modal -->
    <div class="modal fade" id="alertRecordsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">
              告警记录
            </h4>
          </div>
          <div class="modal-body">
            <table id="notification-table" class="table">
              <thead>
                <tr>
                  <th data-field="noticeAt">通知时间</th>
                  <th data-field="content.content">通知内容</th>
                </tr>
              </thead>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>
    <script>
      var _this = null;
      var archiveCtrl = _this = {
        initViewMethods: {
          initDatetimePicker: function() {
            $('.datetimepicker').datetimepicker({
              locale: 'zh-cn',
              format: 'YYYY-MM-DD'
            });
          },
          initTable: function() {
            _this.methods.initTable();
          },
          initAddressSelect: function() {
            client.queryAddress(new TruckTrack.TAddressQuery(), function(res) {
              console.log(res)
              var addresses = res.items;
              var deliverAddressSel = $('#deliverAddressId');
              var receiveAddressSel = $('#receiveAddressId');
              for (var i=0, l=addresses.length; i<l; i++) {
                var address = addresses[i];
                var $option = $('<option></option');
                $option.val(address.id);
                $option.text(address.name);
                if (address.type == 0) {
                  deliverAddressSel.append($option);
                } else {
                  receiveAddressSel.append($option);
                }
              }
            });
          }
        },
        initEventHandlers: {
          queryArchiveBtnHandler: function() {
            $('#query_archive_btn').click(function() {
              _this.methods.initTable();
            })
          }
        },
        methods: {
          initTable: function() {
            var $table = $('#archive-table');
            $table.bootstrapTable('destroy');

            var queryData = _this.methods.convertFormData($('#query_archive_form').serializeObject());
            console.log(queryData)
            client.queryTransportation(new TruckTrack.TTransportationQuery(queryData), function(res) {
              console.log(res);
              var items = res.items;
              for(var i=0, l=items.length; i<l; i++) {
                var item = items[i];
                item.deliverDateTxt = js_date_time(item.deliverDate);
                item.receiveDateTxt = js_date_time(item.receiveDate);
                item.realCapacityTxt = item.realCapacity + '吨';
                item.warningTxt = item.warning ? '是' : '否';
              }
              $table.bootstrapTable({
                data: items,
                pagination: true,
                pageSize: 10
              });
            })
          },
          convertFormData: function(formData) {
            var queryData = {}
            if (formData.warning) {
              queryData.warning = +formData.warning ? true : false;
            }
            if (formData.deliverAddressId) {
              queryData.deliverAddressId = +formData.deliverAddressId;
            }
            if (formData.receiveAddressId) {
              queryData.receiveAddressId = +formData.receiveAddressId;
            }
            if (formData.beginDate) {
              queryData.beginDate = js_datestr_to_time(formData.beginDate);
            }
            if (formData.endDate) {
              queryData.endDate = js_datestr_to_time(formData.endDate);
            }
            if (formData.licNumber) {
              queryData.licNumber = formData.licNumber;
            }
            return queryData;
          },
          initNotificationTable: function(id) {
            client.queryTsNotice(new TruckTrack.TTsNoticeQuery({
              tsNo: id
            }), function(res) {
              console.log(res);
              var items = res.items;
              for (var i=0, l=items.length; i<l; i++) {
                var item = items[i];
                item.noticeAt = js_date_time(item.noticeAt);
                item.type = item.type == 0 ? '通知' : item.type == 1 ? '告警' : '未知';
              }
              var $table = $('#notification-table');
              $table.bootstrapTable({
                data: res.items,
                pagination: true,
                pageSize: 7
              });
            });
          },
          operationFormatter: function(val, row, index) {
            var id = row.id;
            var opt1 = '<a class="operation pointer attachment btn btn-success">附件</a>';
            var opt2 = '<a class="operation pointer record btn btn-danger" onclick="archiveCtrl.methods.showAlertRecordstModal(' + id + ')">告警记录</a>';
            var opt3 = '<a class="operation pointer track btn btn-info" href="track.html?id=' + id + '&license=' + row.truck.licNumber + '" target="_blank">历史轨迹</a>';
            if (row.warning) {
              return opt1 + opt2 + opt3;
            }
            return opt1 + opt3;
          },
          showAttachmentsModal: {
            'click .attachment': function(e, val, row, index) {
              if (!row.id) return;
              $modal = $('#attachmentsModal');
              $modal.modal();

              var deliverImgs = row.deliverFiles,
                  receiveImgs = row.receiveFiles,
                  $deliverImgsContainer = $('#deliver_img_container'),
                  $receiveImgContainer = $('#receive_img_container');

              prependImg(deliverImgs, $deliverImgsContainer);
              prependImg(receiveImgs, $receiveImgContainer);

              function prependImg(files, $container) {
                $container.find('img').remove();
                for (var i=0, l=files.length; i<l; i++) {
                  var $img = $('<img class="attachment-img">'),
                      file = files[i]
                      url = file.url + '/' + file.name;
                  $img.attr('src', url);
                  $container.prepend($img);
                }
              }
            }
          },
          showAlertRecordstModal: function(id) {
            if (!id) return;
            $('#alertRecordsModal').modal();
            _this.methods.initNotificationTable(id);
          }
        },
        bootstrap: function() {
          var initViewMethods = this.initViewMethods;
          var initEventHandlers = this.initEventHandlers;
          for (var key in initViewMethods) {
            initViewMethods[key]();
          }
          for (var key in initEventHandlers) {
            initEventHandlers[key]();
          }
        }
      }

      $(function() {
        archiveCtrl.bootstrap();
      });
    </script>
  </body>
</html>
